<template>
  <div>
    <!-- 页面搜素栏 -->
    <div class="profile-top">
      <el-input placeholder="档案号" v-model="iputnum.fileNumber" clearable class="input-search"
        onkeyup="this.value=this.value.replace(/[, ]/g,'')">
      </el-input>
      <el-input placeholder="姓名" v-model="iputnum.memberName" clearable class="input-search"
        onkeyup="this.value=this.value.replace(/[, ]/g,'')">
      </el-input>
      <el-input placeholder="手机号" v-model="iputnum.memberPhone" clearable class="input-search"
        onkeyup="this.value=this.value.replace(/[, ]/g,'')">
      </el-input>
      <el-button type="primary" class="search-btn" @click="searchBtn(iputnum)">查询</el-button>
    </div>
    <!-- 新增按钮 -->
    <div>
      <el-button style="margin-bottom: 20px" type="primary" @click="dialogFormVisible = true">新增</el-button>
    </div>
    <!-- 表单内容 -->
    <template>
      <el-table :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      " @select="selectionRow" stripe style="width: 100%" :header-cell-style="{ background: 'black' }">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="memberTestTime" label="体验时间">
        </el-table-column>
        <el-table-column prop="fileNumber" label="档案号"> </el-table-column>
        <el-table-column prop="memberName" label="姓名"> </el-table-column>

        <el-table-column prop="memberPhone" label="手机号码"> </el-table-column>
        <el-table-column prop="memberChoose" label="检测套餐">
        </el-table-column>
        <el-table-column prop="markdownStatus" label="报告状态">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
                 <el-button size="mini" plain @click="handleClick(scope.row)">上传报告</el-button>
               <el-button type="danger" size="mini" plain @click="delitClcik(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 分页 -->
    <div class="block">
      <el-pagination style="margin-top: 30px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[5, 10, 10, 100]" :page-size="5"
        layout="->,total, sizes, prev, pager, next, jumper" :total="totalNum">
      </el-pagination>
    </div>
    <!-- 新增模态框 -->
    <el-dialog title="上传报告" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" :rules="rules" :inline="true">
        <el-form-item label="姓名" prop="memberName" label-width="150px">
          <el-input v-model="form.memberName"></el-input>
        </el-form-item>
        <el-form-item prop="fileNumber" label="档案号" label-width="150px">
          <el-input v-model="form.fileNumber"></el-input>
        </el-form-item>
        <el-form-item prop="memberTestTime" label="体检时间" label-width="150px">
          <template>
            <el-date-picker v-model="form.memberTestTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </template>
        </el-form-item>

        <el-form-item prop="memberPhone" label="手机号" label-width="150px">
          <el-input v-model="form.memberPhone"></el-input>
        </el-form-item>
        <!-- 下拉菜单 -->
        <el-form-item label="检测套餐" prop="region" label-width="150px">
          <el-select v-model="form.memberChoose" placeholder="请选择活动区域">
            <el-option label="一般体检项" value="一般体检项"></el-option>
            <el-option label="初级体验包" value="初级体验包"></el-option>
            <el-option label="一级体验包" value="一级体验包"></el-option>
          </el-select>
        </el-form-item>
        <!-- 上传报告状态 -->
        <el-form-item label="数据文件：" ref="upload_attach_sum" prop="files" size="small" label-width="150px">
          <el-upload ref="upload_attach" action="#" multiple accept=".pdf, .doc, .docx, .xls, .xlsx,jpg,jpeg" :limit="1"
            :on-change="changFile" :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false"
            :http-request="uploadSectionFile">
            <el-button slot="trigger" size="small" type="primary">上传报告</el-button>
            <div slot="tip" class="el-upload__tip">
              注:上传的文件须是压缩文件格式，且不超过50M
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" v-on:click="onSubmit(form)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 上传文件模态框 -->
    <el-dialog title="上传报告" :visible.sync="dialogFormVisible1">
      <el-form :model="form1" ref="form1" :inline="true">
        <el-form-item label="姓名" prop="memberName" label-width="150px">
          <el-input v-model="form1.memberName" disabled></el-input>
        </el-form-item>
        <el-form-item prop="fileNumber" label="档案号" label-width="150px">
          <el-input v-model="form1.fileNumber" disabled></el-input>
        </el-form-item>

        <el-form-item prop="memberTestTime" label="体检时间" label-width="150px" disabled>
          <template>
            <el-date-picker v-model="form1.memberTestTime" type="date" placeholder="选择日期" disabled>
            </el-date-picker>
          </template>
        </el-form-item>
        <el-form-item prop="memberPhone" label="手机号" label-width="150px">
          <el-input v-model="form1.memberPhone" disabled></el-input>
        </el-form-item>
        <!-- 下拉菜单 -->
        <el-form-item label="检测套餐" prop="region" label-width="150px" disabled>
          <el-select v-model="form1.memberChoose" placeholder="请选择项目" disabled>
            <el-option label="一般体检项" value="一般体检项"></el-option>
            <el-option label="初级体验包" value="初级体验包"></el-option>
            <el-option label="一级体验包" value="一级体验包"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="报告状态" prop="region" label-width="150px">
          <el-select disabled v-model="form1.markdownStatus" placeholder="报告上传状态">
            <el-option label="报告已上传" value="报告已上传"></el-option>
            <el-option label="报告未上传" value="报告未上传"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据文件：" ref="upload_attach_sum" prop="files" size="small" label-width="150px">
          <el-upload ref="upload_attach" action="" multiple accept=".pdf, .doc, .docx, .xls, .xlsx,jpg,jpeg" :limit="1"
            :on-change="changFile1" :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false"
            :http-request="uploadSectionFile1">
            <el-button slot="trigger" size="small" type="primary">上传报告</el-button>
            <div slot="tip" class="el-upload__tip">
              注:上传的文件须是压缩文件格式，且不超过50M
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" v-on:click="onSubmit_a(form1)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 成功弹出模态框 -->
  </div>
</template>

<script>
import { Loading } from "element-ui";
import { time1 } from "../../utli/commin.js";
// 当前页面删除  新增完成
export default {
  data() {
    // 验证手机号
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value == "") {
        callback(new Error("请输入手机号"));
      } else if (!this.isCellPhone(value)) {
        //引入methods中封装的检查手机格式的方法
        callback(new Error("请输入正确的手机号!"));
      } else {
        callback();
      }
    };
    var validateAttach = (rule, value, callback) => {
      // //console.log(this.fileList.length);
      if (this.fileList.length == 0) {
        callback(new Error("请选择附件"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false, //成功模态框
      // 复选框
      rowId: "",
      // 输入框
      iputnum: {
        fileNumber: "",
        memberName: "",
        memberPhone: "",
      },
      currentPage: 1, //默认显示第一页
      pageSize: 5, //默认每页显示10条
      totalNum: 1000, //总页数
      // 模态框新增加
      dialogTableVisible: false,
      dialogFormVisible: false,

      tableData: [],
      // 新增模态框
      form: {
        fileUpdate: "", //(string, optional): 报告上传 ,
        memberName: "",
        memberTestTime: "",
        fileNumber: "",
        markdownStatus: "",
        memberPhone: "",
        memberChoose: "",
      },
      // 上传文件模态框  只应该允许上传文件
      dialogFormVisible1: false,

      form1: {
        id: "",
        fileUpdate: "", //(string, optional): 报告上传 ,
        memberName: "",
        memberTestTime: "",
        fileNumber: "",
        markdownStatus: "",
        memberPhone: "",
        memberChoose: "",
      },
      // 文件
      fileList: [],
      //规则
      rules: {
        memberName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        fileNumber: [
          { required: true, message: "请输入档案号", trigger: "blur" },
        ],
        memberTestTime: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        memberPhone: [
          { required: true, validator: checkphone, trigger: "blur" },
        ],

        // files: [{ validator: validateAttach }],
      },
      rules1: {
        files: [{ validator: validateAttach }],
      },
    };
  },

  methods: {
    //检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },

    // 表格复选框事件
    selectionRow(selection, row) {
      // //console.log(row.id);
      this.rowId = row.id;
    },
    //上传文件
    handleClick(row) {
      this.dialogFormVisible1 = true;
      this.form1.id = row.id;
      this.form1.memberName = row.memberName;
      // 将日期格式转化为时间戳
      this.form1.memberTestTime = new Date(row.memberTestTime).getTime();
      this.form1.fileNumber = row.fileNumber;
      this.form1.memberPhone = row.memberPhone;
      this.form1.memberChoose = row.memberChoose;
      this.form1.markdownStatus = row.markdownStatus;
    },
    // 文件改变
    changFile1(param, fileList) {
      // //console.log(param);
      this.fileList = fileList;
    },
    // 上传文件提交  未完成
    onSubmit_a(form1) {
      // 判断
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.$refs.upload_attach.submit(); // 触发调用uploadSectionFile1，拿到param参数里面的File
          // alert("发送post请求!");
        } else {
          //console.log("error submit!!");
          this.$message({
            message: "请填写完整信息再后提交",
            type: "error",
          });
          return false;
        }
      });
    },

    uploadSectionFile1(param) {
      // //console.log(param);
      // 判断是否为已上传

      let MyFormData = new FormData();
      let file = param.file;
      MyFormData.append("file", file);
      //console.log(file);
      this.$axios({
        url: "/memberTestManager/updateFile",
        method: "post",
        data: {
          file: MyFormData.get("file"),
        },
        params: {
          id: this.form1.id,
          fileNumber: this.form1.fileNumber,
          memberChoose: this.form1.memberChoose,
          memberName: this.form1.memberName,
          memberPhone: this.form1.memberPhone,
          memberTestTime: this.form1.memberTestTime,
        },
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        //console.log(res);
        if (res.code === 0) {
          // 后端没有做其他修改，只能上传文件改变文件上传状态
          this.$message({
            type: "success",
            message: "上传成功",
          });
          this.dialogFormVisible1 = false;
          // 刷新
          // location.reload();
        } else {
          //console.log("文件添加失败");
        }
      });
    },

    //查询  问题没有档案号  手机号全部一样
    searchBtn(iputnum) {
      // //console.log(iputnum); //一个对象集合
      if (
        iputnum.memberPhone.trim() === "" &&
        iputnum.fileNumber.trim() === "" &&
        iputnum.memberName.trim() === ""
      ) {
        this.$message({ message: "请输入要查询的内容", type: "error" });
        location.reload();
      }
      if (iputnum.fileNumber.trim()) {
        // //console.log(iputnum);
        //发起请求传数据
        this.$axios({
          url: "/memberTestManager/findMemberTestByFileNumber",
          method: "post",
          data: iputnum,
        }).then((res) => {
          // //console.log(res.data); //错误结果没有筛选
          this.tableData = res.data;
          if (this.tableData.length === 0) {
            this.$message({
              message: "没有查询到相关信息",
              type: "warning",
            });
            location.reload();
          }
        });
      } else if (iputnum.memberName.trim()) {
        // 发起按照姓名搜索的请求
        this.$axios({
          url: "/memberTestManager/findMemberTestByMemberName",
          method: "post",
          data: iputnum,
        }).then((res) => {
          //console.log(res.data);
          this.tableData = res.data;
          if (this.tableData.length === 0) {
            this.$message({
              message: "没有查询到相关信息",
              type: "warning",
            });
            location.reload();
          }
        });
      } else if (iputnum.memberPhone.trim()) {
        // 根据手机号发起axios请求
        this.$axios({
          url: "/memberTestManager/findMemberTestByPhone",
          method: "post",
          data: iputnum,
        }).then((res) => {
          // //console.log(res.data);
          this.tableData = res.data;
          if (this.tableData.length === 0) {
            this.$message({
              message: "没有查询到相关信息",
              type: "warning",
            });
            location.reload();
          }
        });
      } else {
        //  请求页面数据
        this.$axios({
          url: "/memberTestManager/memberTestList",
          method: "post",
          data: {
            // fileNumber: 225550,
            limit: 5,

            page: 1,
          },
        }).then((res) => {
          //console.log(res.data);
          this.tableData = res.data;
          // 关联分页
          this.totalNum = res.data.length;
        });
      }
    },
    // 分页
    handleSizeChange(val) {
      // //console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制最多选择 1 个文件`);
    },
    // 删除
    delitClcik(row) {
      // //console.log(row);
      var id = row.id;
      // 发起删除请求
      // //console.log(this.rowId === id);
      if (this.rowId === id) {
        this.$axios({
          url: "/memberTestManager/deleteMemberTest",
          method: "post",
          data: { id: id },
        }).then((res) => {
          //console.log(res);
          if (res.code === 0) {
            this.$message({ message: "删除成功", type: "success" });
            // 重新请求页面
            location.reload();
          } else {
            //console.log("删除失败");
          }
        });
      } else {
        this.$message({ message: "未选中当前要删除的选项", type: "error" });
      }
    },

    //新增 文件改变
    changFile(file, fileList) {
      // //console.log(file);

      this.fileList = fileList;

      // this.$axios({
      //   url: "/memberTestManager/updateFile",
      //   method: "post",
      //   data: { file: MyFormData.get("file") },
      //   headers: {
      //     "Content-Type": "multipart/form-data",
      //   },
      // }).then((res) => {
      //   //console.log(1111);
      //   //console.log("++", res);
      //   if (res.code === 0) {
      //     this.form1.fileUpdate = res.data;
      //   }
      // });
    },
    // 新增确认
    onSubmit(form) {
      // 校验合法性

      this.$refs.form.validate((valid) => {
        if (valid) {
          // alert("发送post请求!");
          this.$refs.upload_attach.submit(); // 触发调用uploadSectionFile，拿到param参数里面的File
        } else {
          //console.log("error submit!!");
          this.$message({
            message: "请填写完整信息再后提交",
            type: "error",
          });
        }
      });
    },
    uploadSectionFile(param) {
      // //console.log(param);
      let MyFormData = new FormData();
      let file = param.file; // 将form中的files字段赋值File对象
      MyFormData.append("file", file);
      //console.log(this.form);
      this.$axios({
        url: "/memberTestManager/addMemberTest",
        method: "post",
        data: {
          file: MyFormData.get("file"),
        },
        params: {
          fileNumber: this.form.fileNumber,
          memberChoose: this.form.memberChoose,
          memberName: this.form.memberName,
          memberPhone: this.form.memberPhone,
          memberTestTime: this.form.memberTestTime,
        },
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        // //console.log(1111);
        // //console.log("+++++", res.data);

        if (res.code === 0) {
          this.dialogFormVisible = false;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          // 重新加载页面
          location.reload();
        } else {
          this.$message({
            message: "请填写完整信息再后提交",
            type: "error",
          });
        }
      });
    },
  },
  // 创建是触发储存数据

  created() {
    // //console.log(this.tableData);

    //  请求页面数据
    this.$axios({
      url: "/memberTestManager/memberTestList",
      method: "post",
      data: {
        // fileNumber: 225550,
        limit: 5,
        page: 1,
      },
    }).then((res) => {
      // //console.log(res.data);
      this.tableData = res.data;
      this.tableData.forEach((e) => {
        if (e.markdownStatus === null) {
          e.markdownStatus = "报告未上传";
        }
        e.memberTestTime = time1(e.memberTestTime);
      });

      // 关联分页
      this.totalNum = res.data.length;
      // 存储到vuex
      this.$store.commit("UPdataData", this.tableData);
    });
  },
};
</script>

<style scoped>
.profile-top {
  overflow: hidden;
}

.input-search {
  width: 200px;
  float: left;
  margin-right: 50px;
}

.search-btn {
  float: left;
  margin-bottom: 10px;
  width: 120px;
}
</style>